<template>
	<view class="page">
		<!-- 优惠券兑换 -->
		<view class="banner-title" v-if="ExchangeType == 0">
			<view class="banner">
				<image src="/static/coupon_default.png" mode=""></image>
			</view>
			<view class="title">
				<view class="name">{{couponDetails.coupon_introduce}}</view>
				<view class="describe">领券当日开始90天内有效</view>
			</view>
			<view class="integral-title">
				<view class="integral">
					<text class="action">{{couponDetails.points_required}}</text>
					<text>积分</text>
				</view>
				<view class="integral">
					<text>剩余</text>
					<text class="action">{{couponDetails.coupon_number}}</text>
					<text>件</text>
				</view>
			</view>
		</view>
		<!-- 商品兑换 -->
		<view class="banner-goods" v-else>
			<view class="banner">
				<swiper class="screen-swiper round-dot" indicator-dots="true" circular="true" autoplay="true"
					interval="5000" duration="500">
					<swiper-item v-for="(item, index) in swiperList" :key="index">
						<image :src="item.url" mode="widthFix"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="goods-title">
				<view class="title-vip">
					<view class="title">
						<text>荣耀20青春版 AMOLED屏幕指纹 4000mAh大电池 20W快充 4800万 手机 4GB+64GB 冰岛幻境</text>
					</view>
					<view class="vip">
						<text>超级会员</text>
					</view>
				</view>
				<view class="integral-title">
					<view class="integral">
						<text class="action">10000</text>
						<text>积分</text>
					</view>
					<view class="integral">
						<text>剩余</text>
						<text class="action">1000</text>
						<text>件</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 兑换须知 -->
		<view class="convertible-notes">
			<view class="title">兑换须知</view>
			<view class="content">
				<view>1、领券当日开始90天内有效;</view>
				<view>2、本优惠券限量1000件/期，兑完即止;</view>
				<view>3、部分新品、特价商品、拼团特惠、限时特惠和超级会员特价商品不可使用;</view>
				<view>4、优惠券兑换后，不可取消兑换并返还积分。</view>
			</view>
		</view>
		<!-- 兑换按钮 -->
		<view class="exchange-btn">
			<view class="btn" @click="onExchange">立即兑换</view>
		</view>
		<!-- 兑换弹窗 -->
		<view class="exchange-win">
			<view class="cu-modal" :class="{'show':isExchange}">
				<view class="cu-dialog">
					<view class="bg-img" style="background-image: url('/static/img/banner_04.png');height:200px;">
						<view class="cu-bar justify-end text-white">
							<view class="action">
								<text class="cuIcon-close" @click="isExchange = false"></text>
							</view>
						</view>
					</view>
					<view class="goods-title">
						<view class="title-vip">
							<view class="title">
								<text class="two-omit">荣耀20青春版 AMOLED屏幕指纹 4000mAh大电池 20W快充 4800万 手机 4GB+64GB 冰岛幻境</text>
							</view>
							<view class="vip">
								<text>超级会员</text>
							</view>
						</view>
						<view class="integral-title">
							<view class="integral">
								<text class="action">10000</text>
								<text>积分</text>
							</view>
							<view class="integral">
								<text>剩余</text>
								<text class="action">1000</text>
								<text>件</text>
							</view>
						</view>
					</view>
					<view class="delivery-address">
						<view class="title">收货地址</view>
						<view class="address-phone">
							<view class="icon">
								<text class="iconfont icon-dingwei1"></text>
							</view>
							<view class="address">
								<view class="location">
									<text class="one-omit">南山区科苑路15号科兴科学园</text>
								</view>
								<view class="name-phone">
									<text>王哈哈</text>
									<text>188****8888</text>
								</view>
							</view>
							<view class="more">
								<text class="iconfont icon-more"></text>
							</view>
						</view>
					</view>
					<view class="affirm-btn">
						<view class="btn" @click="onAffirm">确认</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ExchangeType: 0,
				isExchange: false,
				id: null,
				couponDetails: {
					coupon_introduce: '', // 直接使用接口返回字段
					points_required: 0,
					coupon_number: 0,
					coupon_name: '', // 新增字段
					coupon_expiration: 0 // 新增有效期字段
				},
				loading: true,
				error: null,
				swiperList: [{
						id: 0,
						type: 'image',
						url: '/static/img/banner_01.png'
					},
					{
						id: 1,
						type: 'image',
						url: '/static/img/banner_02.png'
					},
					{
						id: 2,
						type: 'image',
						url: '/static/img/banner_03.png'
					},
					{
						id: 3,
						type: 'image',
						url: '/static/img/banner_04.png'
					},
					{
						id: 4,
						type: 'image',
						url: '/static/img/banner_01.png'
					},
					{
						id: 5,
						type: 'image',
						url: '/static/img/banner_01.png'
					}
				],
			};
		},
		onLoad(params) {
			// 参数校验
			if (!params.id || isNaN(params.id)) {
				this.handleError('无效的优惠券ID');
				return;
			}

			this.ExchangeType = parseInt(params.type) || 0;
			this.id = parseInt(params.id);
			this.fetchCouponDetails();
		},
		methods: {
			/**
			 * 兑换确认点击
			 */
			onAffirm() {
				uni.navigateTo({
					url: '/pages/ExchangeResult/ExchangeResult?type=' + this.ExchangeType,
				})
			},
			//兑换优惠卷详情
			async fetchCouponDetails() {
				try {
					const [error, res] = await uni.request({
						url: 'http://127.0.0.1:8899/coupon/points/info',
						method: 'POST',
						header: {
							'Content-Type': 'application/json'
						},
						data: {
							points_id: this.id
						}
					});

					if (error) throw new Error('网络请求失败');
					if (res.data.code !== 0) throw new Error(res.data.message || '获取详情失败');

					// 完善数据映射
					const result = res.data.data.points_info_by_id;
					this.couponDetails = {
						coupon_introduce: result.coupon_introduce,
						points_required: result.points_required,
						coupon_number: result.coupon_number,
						coupon_name: result.coupon_name, // 确保接口返回包含coupon_name字段
						coupon_expiration: result.coupon_expiration
					};

				} catch (e) {
					this.handleError(e.message);
				} finally {
					this.loading = false;
				}
			},
			async onExchange() {
				try {
					// 构造请求参数
					const requestData = {
						user_id: 3, // 固定用户ID（根据需求调整）
						points_id: this.id, // 从URL参数获取的优惠券ID
						points_name: this.couponDetails.coupon_name, // 从详情数据获取优惠券名称
						points_required: this.couponDetails.points_required // 从详情数据获取所需积分
					};

					// 显示加载状态
					uni.showLoading({
						title: '兑换中...',
						mask: true
					});

					// 调用兑换接口
					const [err, res] = await uni.request({
						url: 'http://127.0.0.1:8899/coupon/add/points/deduction',
						method: 'POST',
						header: {
							'Content-Type': 'application/json' // 明确指定JSON格式
						},
						data: requestData,
						dataType: 'json'
					});

					// 错误处理
					if (err) throw new Error('网络请求失败');
					if (res.data.code !== 0) throw new Error(res.data.message || '兑换失败');

					// 兑换成功处理
					uni.navigateTo({
						url: `/pages/ExchangeResult/ExchangeResult?type=${this.ExchangeType}&status=success`
					});

				} catch (e) {
					// 错误提示
					uni.showToast({
						title: e.message,
						icon: 'none',
						duration: 2000
					});
				} finally {
					// 隐藏加载状态
					uni.hideLoading();
				}
			},

		}
	}
</script>

<style scoped lang="scss">
	@import 'ExchangeDetails.scss';
</style>